<template>
	<view class="page index">
		<empty v-if="empty" desc="该合同已删除"></empty>
		<block v-else>
			<view class="agreement-sheet">
				<view class="header">
					<view class="left">
						{{detail.name}}
					</view>
					<view v-if="detail.auditStatus == 30" class="right" :style="{color: `#bd3124`, borderColor: `#bd3124`}">
						不通过
					</view>
					<view v-else class="right" :style="{color: `${detail.color}`, borderColor: `${detail.color}`}">
						{{detail.statusText}}
					</view>
				</view>
				<view class="main">
					<view class="amount">
						<view class="tag">
							回款金额/签约金额
						</view>
						<view class="value">
							￥{{detail.totalReceivablePrice}}/￥{{detail.totalPrice}}
						</view>
					</view>
					<view class="progress">
						<view class="curr-progress" :style="{width: `${progress}%`}">
							<span v-if="progress <= 50" class="text" :style="{left: `calc(${progress}% - 10px)`}">{{progress}}%</span>
							<span v-else class="text" :style="{right: `calc(${100 - progress}% - 10px)`}">{{progress}}%</span>
						</view>
					</view>
				</view>
				<view class="bottom">
					<navigator :url="'/pages/index/customer/details?id=' + detail.customerId" class="list-item" hover-class="none">
						<view class="left">
							<span class="iconfont icon" style="color: #de868f;">&#xe6ec;</span>
							<view class="title">
								{{detail.customerName}}
							</view>
						</view>
						<view class="right">
							<uni-icons type="right" size="20" color="#101010"></uni-icons>
						</view>
					</navigator>
					<navigator :url="'/pages/index/project/details?id=' + detail.projectId" class="list-item" hover-class="none">
						<view class="left">
							<span class="iconfont icon" style="color: #ffbf6b;">&#xe604;</span>
							<view class="title">
								{{detail.projectName}}
							</view>
						</view>
						<view class="right">
							<uni-icons type="right" size="20" color="#101010"></uni-icons>
						</view>
					</navigator>
				</view>
			</view>
			<view class="tab-list">
				<view :class="['tab-item', tabIndex == index && 'tab-select']" v-for="(item, index) in tabList" :key="index" @click="tabIndex = index">
					{{item}}
				</view>
			</view>
			<view class="container">
				<agreement-message :message="detail" v-if="tabIndex == 0"></agreement-message>
				<agreement-relevant :contract="detail" v-if="tabIndex == 1"></agreement-relevant>
			</view>
			<view class="footer">
				<button @click="moreOperation">更多</button>
			</view>
		</block>
		<!-- 更多操作 -->
		<uni-popup ref="agreementOperation" type="center">
			<view class="more-operation">
				<view class="operation-item" @click="edit" v-if="detail.auditStatus == 30">
					<span class="iconfont icon" style="color: #101010;">&#xe8ac;</span>
					<span>编辑合同</span>
				</view>
				<view class="operation-item" @click="cancelAgreement" v-if="detail.status == 1">
					<span class="iconfont icon" style="color: #101010;">&#xe753;</span>
					<span>作废合同</span>
				</view>
				<view class="operation-item" v-if="detail.status == 0" @click="deleteContract">
					<span class="iconfont icon" style="color: #101010;">&#xe603;</span>
					<span>删除合同</span>
				</view>
				<view class="operation-item" @click="approval">
					<span class="iconfont icon" style="color: #101010;">&#xe6b8;</span>
					<span>查看审批</span>
				</view>
			</view>
		</uni-popup>
		<!-- 删除合同 -->
		<uni-popup ref="deletePopup" type="center">
			<view class="model-popup">
				<view class="top">
					<view class="title">
						删除合同
					</view>
					<view class="content">
						确定要删除该合同吗？
					</view>
				</view>
				<view class="bottom">
					<button class="cancle" @click="$refs.deletePopup.close();">取消</button>
					<button class="confire" @click="confireDelete">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import agreementMessage from "./components/agreementMessage.vue";
	import agreementRelevant from "./components/agreementRelevant.vue";
	import empty from "@/components/empty.vue"
	import {getContractDetailApi, deleteContractApi} from "@/api/agreement_api.js";
	export default{
		components: {
			agreementMessage,
			agreementRelevant,
			empty
		},
		data(){
			return{
				empty: false,
				id: 0,//合同id
				tabList:['基本信息', '相关信息'],
				detail: {},
				tabIndex:0,
			}
		},
		computed:{
			progress(){
				return this.detail.totalPrice ? (this.detail.totalReceivablePrice / this.detail.totalPrice).toFixed(2) * 100 : 0;
			}
		},
		onLoad(e) {
			this.id = e.id;
		},
		onShow() {
			uni.showLoading({
				mask:true,
				title:'加载中...'
			})
			this.getContractDetail();
		},
		methods:{
			// 获取合同详情
			async getContractDetail(){
				let res = await getContractDetailApi(this.id).catch(() => {
					uni.hideLoading();
					return Promise.reject();
				})
				let statusText = "";
				let color = "";
				switch(res.data.status){
					case 0: {
						statusText = "审批中";
						color = "#f6d7ab";
						break;
					}
					case 1: {
						statusText = "生效";
						color = "#3388FF";
						break;
					}
					case 2: {
						statusText = "作废";
						color = "#F44444";
						break;
					}
					case 3: {
						statusText = "履行完毕";
						color = "#3BBF03";
						break;
					}
				}
				this.detail = res.data;
				this.$set(this.detail, 'statusText', statusText);
				this.$set(this.detail, 'color', color);
				await uni.hideLoading();
			},
			createProgress(){
				uni.navigateTo({
					url:'/pages/index/task/createProgress'
				})
			},
			// 更多操作
			moreOperation(){
				this.$refs.agreementOperation.open();
			},
			// 编辑合同
			edit(){
				uni.navigateTo({
					url: `/pages/index/agreement/edit?detail=${JSON.stringify(this.detail)}`
				})
				this.$refs.agreementOperation.close();
			},
			// 删除合同
			deleteContract(){
				this.$refs.deletePopup.open();
				this.$refs.agreementOperation.close();
			},
			confireDelete(){
				this.$refs.deletePopup.close();
				uni.showLoading({
					mask: true,
					title: '加载中...'
				})
				deleteContractApi(this.detail.id).then(() => {
					uni.hideLoading();
					this.empty = true;
					uni.showToast({
						icon: 'success',
						title: '操作成功'
					})
				}).catch(() => {
					uni.hideLoading();
				})
			},
			// 作废合同
			cancelAgreement(){
				uni.navigateTo({
					url: `/pages/index/agreement/cancelAgreement?id=${this.detail.id}`
				})
				this.$refs.agreementOperation.close();
			},
			// 查看审批
			approval(){
				uni.navigateTo({
					url: `/pages/index/approval/details?id=${this.detail.processInstanceId}&showPass=${false}`
				})
				this.$refs.agreementOperation.close();
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/style/customicons.scss";
	.index{
		@include flex-c;
		.agreement-sheet{
			margin: 24rpx 28rpx 0;
			flex: 0 0 auto;
			@include box;
			@include list;
			.main{
				.amount{
					color: #9A9A9A;
					font-size: 24rpx;
					padding: 24rpx 0 34rpx;
				}
				.progress{
					height: 10rpx;
					width: 100%;
					background-color: #e5e5e5;
					border-radius: 100rpx;
					position: relative;
					.curr-progress{
						height: 10rpx;
						// width: 50%;
						border-radius: 100rpx;
						background-color: #3388FF;
						.text{
							position: absolute;
							top: -10rpx;
							// right: calc(100% - 10px);
							width: 80rpx;
							height: 30rpx;
							@include flex-r-center-center;
							color: #fff;
							font-size: 24rpx;
							background-color: #3388FF;
							border-radius: 100rpx;
						}
					}
				}
			}
			.bottom{
				padding: 34rpx 0 24rpx;
				.list-item{
					@include flex-r-between-center;
					border-top: #d8d8d8 4rpx solid;
					height: 84rpx;
					.left{
						@include flex-r-start-center;
						.icon{
							font-size: 44rpx
						}
						.title{
							font-size: 32rpx;
							color: #40a4ec;
							padding-left: 20rpx;
							
						}
					}
				}
			}
		}
		.tab-list{
			flex: 0 0 auto;
			@include flex-r-evely-center;
			padding: 34rpx 28rpx 0;
			.tab-item{
				color: #101010;
				font-size: 28rpx;
				text-align: center;
				&::after{
					content: '';
					display: block;
					width: 120rpx;
					height: 6rpx;
					border-radius: 10rpx;
					background-color: transparent;
					margin-top: 10rpx;
				}
				&.tab-select{
					color: #1684fc;
					&::after{
						background-color: #1684fc;
					}
				}
			}
		}
		.container{
			flex: 1 0 0;
			overflow: auto;
			&::-webkit-scrollbar{
				display: none;
			}
		}
		.footer{
			flex: 0 0 auto;
			padding: 24rpx 30rpx 0;
			margin: 0 0 24rpx;
			@include flex-r-center-start;
			button{
				@include button;
				color: #fff;
				width: 80%;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 28rpx;
				background-color: #198AFA;
			}
		}
		// 更多操作弹出框样式
		.more-operation{
			width: 400rpx;
			background-color: #fff;
			@include box;
			.operation-item{
				@include flex-r-center-center;
				font-size: 28rpx;
				line-height: 100rpx;
				border-bottom: #d0d0d0 4rpx solid;
				&:last-child{
					border-bottom: none;
				}
				.icon{
					padding-right: 20rpx;
				}
			}
		}
		//对话框样式
		.model-popup{
			width: 600rpx;
			background-color: #fff;
			@include box;
			border-radius: 16rpx;
			.top{
				padding: 24rpx 40rpx 56rpx;
				.title{
					color: #101010;
					font-size: 36rpx;
					text-align: center;
					padding: 0 0 34rpx;
				}
				.content{
					color: #747474;
					font-size: 28rpx;
					text-align: center;
				}
			}
			.bottom{
				@include flex-r;
				border-top: 4rpx #F0F0F2 solid;
				button{
					@include button;
					width: 50%;
					height: 90rpx;
					line-height: 90rpx;
					font-size: 32rpx;
					background-color: #fff;
					border-radius: 0;
				}
				.cancle{
					color: #BBBBBB;
					border-right: 4rpx #F0F0F2 solid;
				}
				.confire{
					color: #4095E5;
				}
			}
		}
	}
</style>